<!DOCTYPE html>
<html lang="zh">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>音/视频批量提取</title>
    <style>
      * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
        font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
          sans-serif;
      }
      /* 遮罩层 */
      .overlay {
        display: none;
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, 0.5);
        z-index: 1;
      } /* 弹窗样式 */
      .modal {
        display: none;
        position: fixed;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        background: #fff;
        padding: 20px;
        box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
        z-index: 2;
        width: 300px;
        text-align: center;
      } /* 关闭按钮 */
      .close-btn {
        background-color: #f44336;
        color: white;
        border: none;
        padding: 5px 10px;
        cursor: pointer;
        border-radius: 5px;
      }
      .close-btn:hover {
        background-color: #d32f2f;
      }
      body {
        padding: 20px;
        background: #fff;
      }

      .container {
        display: flex;
        gap: 20px;
        flex-direction: column;
      }

      .main-content {
        flex: 1;
      }

      .right-panel {
        /* width: 300px; */
      }

      .top-controls {
        display: flex;
        align-items: flex-start;
        flex-direction: column;
        gap: 10px;
        margin-bottom: 20px;
      }

      .input-group {
        display: flex;
        align-items: center;
        gap: 8px;
        margin-right: 10px;
      }

      .required::before {
        content: "*";
        color: #ff4d4f;
        margin-right: 4px;
      }

      input[type="text"] {
        width: 240px;
        height: 32px;
        padding: 4px 11px;
        border: 1px solid #d9d9d9;
        border-radius: 6px;
        font-size: 20px;
      }

      .video-count {
        margin: 0 10px;
        color: #666;
      }

      .btn {
        height: 32px;
        padding: 4px 15px;
        border-radius: 6px;
        font-size: 20px;
        cursor: pointer;
        border: none;
        line-height: 24px;
      }

      .btn-primary {
        background: #5048e5;
        color: white;
        margin-right: 10px;
      }

      .btn-default {
        background: #fff;
        border: 1px solid #d9d9d9;
        color: #333;
      }

      .status-bar {
        margin: 16px 0;
        color: #666;
        font-size: 20px;
      }

      .red-text {
        color: #ff4d4f;
      }

      .table-container {
        border: 1px solid #f0f0f0;
        border-radius: 8px;
        overflow: hidden;
      }

      table {
        width: 100%;
        border-collapse: collapse;
      }

      th {
        background: #fafafa;
        padding: 16px;
        text-align: left;
        font-weight: normal;
        color: #666;
        border-bottom: 1px solid #f0f0f0;
      }

      .empty-state {
        padding: 48px 0;
        text-align: center;
        color: #999;
      }

      .empty-state img {
        width: 64px;
        height: 64px;
        margin-bottom: 8px;
      }

      .settings-section {
        background: #fff;
        padding: 16px;
        border-radius: 8px;
        margin-bottom: 20px;
      }

      .settings-title {
        font-size: 20px;
        margin-bottom: 16px;
        display: flex;
        align-items: center;
        gap: 8px;
      }

      .radio-group {
        display: flex;
        flex-direction: column;
        gap: 12px;
      }

      .progress-section {
        margin-bottom: 10px;
        display: flex;
        align-items: center;
        width: 20%;
      }

      .progress-bar {
        width: 100%;
        height: 8px;
        background: #f5f5f5;
        border-radius: 4px;
        overflow: hidden;
      }

      .progress-inner {
        width: 0%;
        height: 100%;
        background: #1890ff;
        transition: width 0.3s;
      }

      /* 隐藏原生复选框 */
      .custom-checkbox input {
        position: absolute;
        opacity: 0;
        cursor: pointer;
        height: 0;
        width: 0;
      }

      /* 自定义复选框外观 */
      .custom-checkbox .checkmark {
        position: relative;
        display: inline-block;
        width: 18px;
        height: 18px;
        background-color: #fff;
        border: 2px solid #ccc;
        border-radius: 3px;
        margin-right: 8px;
        vertical-align: middle;
        top: -3px;
      }

      /* 选中状态样式 */
      .custom-checkbox input:checked ~ .checkmark {
        background-color: #5048e5;
        border-color: #5048e5;
      }

      /* 勾选图标（使用伪元素） */
      .custom-checkbox .checkmark:after {
        content: "";
        position: absolute;
        display: none;
        left: 3px;
        top: -1px;
        width: 5px;
        height: 10px;
        border: solid white;
        border-width: 0 2px 2px 0;
        transform: rotate(45deg);
      }

      .custom-checkbox input:checked ~ .checkmark:after {
        display: block;
      }

      /* 隐藏原生单选框 */
      .custom-radio input {
        position: absolute;
        opacity: 0;
        cursor: pointer;
      }

      .custom-radio {
        margin-right: 10px;
      }

      /* 自定义单选框外观 */
      .custom-radio .radio-icon {
        position: relative;
        display: inline-block;
        width: 18px;
        height: 18px;
        border: 2px solid #999;
        border-radius: 50%;
        margin-right: 10px;
        vertical-align: middle;
        transition: all 0.3s ease;
        top: -3px;
      }

      /* 选中状态样式 */
      .custom-radio input:checked ~ .radio-icon {
        border-color: #5048e5;
        background-color: #5048e5;
        box-shadow: inset 0 0 0 3px white; /* 内圆效果 */
      }

      /* 悬浮交互效果 */
      .custom-radio:hover .radio-icon {
        border-color: #555;
      }

      /* 禁用状态 */
      .custom-radio input:disabled ~ .radio-icon {
        background-color: #eee;
        border-color: #ccc;
      }
    </style>
    <script src="qrc:///qtwebchannel/qwebchannel.js"></script>
  </head>
  <body>
    <div class="container">
      <div id="overlay" class="overlay" onclick="closeModal()"></div>

      <div id="modal" class="modal">
        <p id="message">消息弹窗</p>
        <!-- TODO: 调整消息弹窗样式 -->
        <button class="close-btn" onclick="closeModal()">关闭</button>
      </div>

      <div class="main-content">
        <div
          style="display: flex; align-items: center; justify-content: flex-end"
        >
          <div class="progress-section">
            <div style="margin-bottom: 8px; min-width: 25%">任务进度:</div>
            <div class="progress-bar">
              <div class="progress-inner" style="width: 0"></div>
            </div>
            <div style="text-align: right; margin-top: 4px; margin-left: 8px">
              0%
            </div>
          </div>
        </div>
        <div class="top-controls">
          <div style="display: flex; align-items: center; margin-bottom: 20px">
            <div class="input-group">
              <label class="required">素材目录:</label>
              <label for="clipInput"></label
              ><input
                type="text"
                id="clipInput"
                placeholder="请选择视频文件/文件夹"
                onclick="clipInput('clipInput')"
                value=""
              />
            </div>
            <span style="margin-right: 10px" id="clipInputCount"
              >视频数量: 0</span
            >
            <div class="input-group">
              <label class="required">导出目录:</label>
              <label for="clipOutput"></label
              ><input
                type="text"
                onclick="chooseFolder('clipOutput')"
                id="clipOutput"
                placeholder="请选择文件夹"
                value=""
              />
            </div>
          </div>
          <div>
            <button class="btn btn-primary" onclick="openFile('clipOutput')">
              打开文件夹
            </button>
            <button class="btn btn-primary" onclick="start_work()">
              开始任务
            </button>
            <button class="btn btn-default">停止任务</button>
          </div>
        </div>

        <div class="status-bar">
          已选择<span class="red-text" id="select_video_count_total">0</span
          >个视频 总时长: <span id="select_video_duration_total">0.00</span>分钟
          <label class="custom-checkbox">
            <input type="checkbox" id="selectAll" onchange="selectAll()" />
            <span class="checkmark"></span>
            <label for="selectAll">选择全部</label>
          </label>
          <div class="file-list">
            <table>
              <thead>
                <tr>
                  <th style="width: 80px"><label>选择</label></th>
                  <th style="width: 80px">序号</th>
                  <th>文件名</th>
                  <th style="width: 100px">时长</th>
                  <th style="width: 100px">大小</th>
                </tr>
              </thead>
              <tbody id="shotListBody">
                <!-- 动态生成的行将被插入这里 -->
              </tbody>
            </table>
          </div>
        </div>
      </div>

      <div class="right-panel">
        <div class="settings-section">
          <div class="settings-title">文案保存设置</div>
          <div class="radio-group">
            <label class="custom-radio">
              <input type="radio" name="saveType" value="0" checked />
              <span class="radio-icon"></span>
              <label>保存为独立文件</label>
            </label>
            <label class="custom-radio">
              <input type="radio" name="saveType" value="1" />
              <span class="radio-icon"></span>
              <label>合并保存一个文件</label>
            </label>
          </div>
        </div>
      </div>
    </div>
    <script>
      document.addEventListener("DOMContentLoaded", function () {
        let items = [];

        new QWebChannel(parent.qt.webChannelTransport, function (channel) {
          Bridge = channel.objects.Bridge;

          Bridge.started.connect(function (msg) {
            showModal(msg);
          });
          Bridge.finished.connect(function (msg) {
            showModal(msg);
          });
          Bridge.failed.connect(function (msg) {
            showModal(msg);
          });

          // 选择文件夹
          window.chooseFolder = function (eid) {
            Bridge.choose_folder(eid);
          };
          // 打开文件或者文件夹
          window.openFile = function (eid) {
            let path = document.getElementById(eid).value;
            if (path) {
              Bridge.open_file(path);
            }
          };

          window.clipInput = function () {
            Bridge.choose_folder_and_read_video_files("clipInput");
          };
          // 选择的文件夹信号槽
          Bridge.select_folder_result.connect(function (eid, path) {
            document.getElementById(eid).value = path;
          });
          // 返回智能分镜目录
          Bridge.select_files_result.connect(function (eid, files, count) {
            // 渲染基础合成分镜列表
            const tbody = document.getElementById("shotListBody");
            if (!tbody) {
              return;
            }
            let files_list = [];
            items = [];
            for (let file_item of files) {
              files_list.push(`
                                <tr data-id="">
                                    <td>
                                        <label class="custom-checkbox">
                                            <input type="checkbox" class="row-check" value="${file_item.file}"/>
                                            <span class="checkmark"></span>
                                        </label>
                                    </td>
                                    <td>${file_item.id}</td>
                                    <td>${file_item.file}</td>
                                    <td>${file_item.duration}秒</td>
                                    <td>${file_item.size}</td>
                                </tr>
                            `);
              file_item.status = false;
              items.push(file_item);
            }
            tbody.innerHTML = files_list.join("");
            // 更新选择的文件数量
            document.getElementById("clipInputCount").innerText =
              "视频数量: " + count;
            bindEventListeners();
          });

          // 开始任务
          window.start_work = function () {
            let input_path = [],
              status = document.querySelector(
                'input[name="saveType"]:checked'
              ).value,
              output_path = document.getElementById("clipOutput").value;

            for (let item of items) {
              if (item.status) {
                input_path.push(item.file);
              }
            }
            let task_items = {
              task: "提取音频",
              input_files: input_path,
              output_folder: output_path,
              status: parseInt(status),
            };
            Bridge.start_work(JSON.stringify(task_items));
          };
          // 停止任务
        });

        // 开始任务
        let selected_video_count_elm = document.getElementById(
            "select_video_count_total"
          ),
          selected_video_duration_elm = document.getElementById(
            "select_video_duration_total"
          );

        window.showModal = function (message) {
          document.getElementById("message").innerText = message;
          document.getElementById("overlay").style.display = "block";
          document.getElementById("modal").style.display = "block";
        };
        window.closeModal = function () {
          document.getElementById("overlay").style.display = "none";
          document.getElementById("modal").style.display = "none";
        };
        // 选择全部
        window.selectAll = function () {
          let selectAllCheckbox = document.getElementById("selectAll");
          let rowCheckboxes = document.querySelectorAll(".row-check");
          rowCheckboxes.forEach((checkbox) => {
            checkbox.checked = selectAllCheckbox.checked;
          });
          if (selectAllCheckbox.checked) {
            selected_video_count_elm.innerText = rowCheckboxes.length;
            // 从items中计算总时长
            let total_duration = 0;
            for (let item of items) {
              total_duration += item.duration;
              item.status = true;
            }
            selected_video_duration_elm.innerText = (
              total_duration / 60
            ).toFixed(2);
          } else {
            for (let item of items) {
              item.status = false;
            }
            selected_video_count_elm.innerText = 0;
            selected_video_duration_elm.innerText = 0;
          }
        };

        window.update_total = function () {
          let total_duration = 0;
          let total_count = 0;
          for (let item of items) {
            if (item.status) {
              total_duration += item.duration;
              total_count++;
            }
          }
          selected_video_count_elm.innerText = total_count;
          selected_video_duration_elm.innerText = (total_duration / 60).toFixed(
            2
          );
        };

        // 监听单个视频选择
        window.bindEventListeners = function () {
          document.querySelectorAll(".row-check").forEach((checkbox) => {
            checkbox.addEventListener("change", function (event) {
              if (checkbox.checked) {
                for (let item of items) {
                  if (item.file === event.target.value) {
                    item.status = true;
                  }
                }
              } else {
                for (let item of items) {
                  if (item.file === event.target.value) {
                    item.status = false;
                  }
                }
              }
              update_total();
            });
          });
        };
      });
    </script>
  </body>
</html>
